<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<template>
  <div class="faultReporting-container">
    <div class="title">异常信息列表</div>

    <div class="top">
      <!-- 输入和日期 -->
      <div class="inputAndPicker">
        <div class="showInputEle">
          <p>异常类型:</p>
          <el-input v-model="input" style="width: 160px" placeholder="请输入名字" />
        </div>
        <div class="showInputEle date">
          <p>上报时间:</p>
          <el-config-provider :locale="zhCn">
            <el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px" />
          </el-config-provider>
        </div>
      </div>

      <!-- 按钮查询 -->
      <div class="btns">
        <div class="btn_bd">查询</div>
        <div class="btn_bg">重置</div>
      </div>
    </div>

    <!-- <div class="top-title">
      <div class="btn_bd">删除</div>
    </div> -->

    <div class="showTable showTableEle">
      <el-table :data="tableData" border style="width: 100%" show-overflow-tooltip>
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="date" label="异常类型" width="280" />
        <el-table-column prop="name" label="异常描述" />
        <el-table-column prop="address" label="上报时间" width="400" />
        <el-table-column prop="name" label="操作" width="180" />
      </el-table>

      <div class="page showPageEle">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.faultReporting-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;

  .title {
    font-size: 14px;
    font-weight: 700;
    height: 36px;
    line-height: 36px;
    margin-top: 12px;
  }

  .top {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    .inputAndPicker {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      > div {
        height: 30px;
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-right: 60px;
        p {
          height: 26px;
          line-height: 26px;
          margin-right: 10px;
        }
      }
    }

    .btns {
      width: 200px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      > div {
        width: 50px;
        height: 24px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        margin-right: 0px;
        margin-left: 20px;
      }
    }
  }

  .top-title {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 5px;
    > div {
      height: 22px;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      cursor: pointer;
      border-radius: 4px;
      font-size: 14px;
    }
    > div:nth-child(2) {
      height: 24px;
      width: auto;
      padding: 0 6px 0 6px;
      margin-left: 20px;
    }
  }

  .showTable {
    flex: 1;
    margin-top: 10px;
    .page {
      display: flex;
      justify-content: flex-end;
      margin-right: 0;
      margin-top: 20px;
    }
  }
}
</style>
